<template>
	<view class="track-detail">
		<view class="tabs" v-if="isHandbook">
			<text v-for="item in tabList" :key="item.id" :class="[{active: tabIndex==item.id}]" @click="changeTab(item.id)">{{item.name}}</text>
		</view>
		
		<view class="trace-plot" v-if="tabIndex==1">
			<view class="title-box">
				<view class="">
					<text>星星连起来会变成星座，你的每一步，其实都算数。</text>
				</view>
				<text style="font-size: 26rpx;">Every step you take counts.</text>
			</view>
			<scroll-view scroll-y="true" class="trace-scroll-Y" :style="traceHeight" :scroll-into-view="scrollIntoViewId">
					<view style="height: 142rpx;"></view>
					<view class="last-trace" id="lasId">
						<view v-for="(item, inx) in lastList" :key="inx" :class="`${inx==(lastList.length-1)?'max-wz':'min-wz'} last_weizhi${inx}`" :style="{'z-index': currentClickId==item.id?2:1}">
							<image :class="`${inx==(lastList.length-1)?'max-img':'min-img'}`" :src="`/static/${inx==(lastList.length-1)?'weizhi2':'weizhi1'}.png`" mode="aspectFill" @click="showDetail(item)"></image>
							<view class="ma-info pro-ma-info" v-show="currentClickId==item.id">
								<text-editor v-if="item.task_type==4 || item.task_type==3" :id-name="`last${inx}`" :read-only="true" 
									:info="{content: item.content, height: 'auto', className: 'ql-container-share'}"></text-editor>
								<text v-else class="ma-content">{{item.content}}</text>
								<view class="see-time">
									<text>{{handleTime(item.update_time)}}</text>
									<view v-if="item.task_type==6 || item.task_type==1" style="color: #28C2CD;font-size: 28rpx;" @click="seeDetails(item.task_id, item.task_type)">查看详情<uni-icons type="right" size="28rpx" color="#28C2CD"></uni-icons></view>
								</view>
							</view>
						</view>
					</view>
					<view v-for="num in trajectoryList.length/2" :key="num">
						<view class="process">
							<view v-for="(item, inx) in trajectoryList.slice(2*(num-1), num*2)" :key="inx" :class="`min-wz pro_weizhi${inx}`" :style="{'z-index': currentClickId==item.id?2:1}">
								<image class="min-img" src="/static/weizhi1.png" mode="aspectFill" @click="showDetail(item)"></image>
								<view class="ma-info pro-ma-info" v-show="currentClickId==item.id">
									<text-editor v-if="item.task_type==4 || item.task_type==3" :id-name="`process${num}${inx}`" :read-only="true" 
										:info="{content: item.content, height: 'auto', className: 'ql-container-share'}"></text-editor>
									<text v-else class="ma-content">{{item.content}}</text>
									<view class="see-time">
										<text>{{handleTime(item.update_time)}}</text>
										<view v-if="item.task_type==6 || item.task_type==1" style="color: #28C2CD;font-size: 28rpx;" @click="seeDetails(item.task_id, item.task_type)">查看详情<uni-icons type="right" size="28rpx" color="#28C2CD"></uni-icons></view>
									</view>
								</view>
							</view>
							
						</view>
					</view>
					
					<view class="entrance" id="entId" >
						<view v-for="(item, inx) in startList" :key="inx" :class="`ent_weizhi${inx} ${inx==(manualList.length-1)?'max-wz':'min-wz'}`" :style="{'z-index': currentClickId==item.id?2:1}">
							<image :class="`${inx==(manualList.length-1)?'max-img':'min-img'}`" :src="`/static/${inx==(manualList.length-1)?'weizhi2':'weizhi1'}.png`" mode="aspectFill" @click="showDetail(item)"></image>
							<view class="ma-info pro-ma-info" v-show="currentClickId==item.id">
								<text-editor v-if="item.task_type==4 || item.task_type==3" :id-name="`entrance${inx}`" :read-only="true" 
									:info="{content: item.content, height: 'auto', className: 'ql-container-share'}"></text-editor>
								<text v-else class="ma-content">{{item.content}}</text>
								<view class="see-time">
									<text>{{handleTime(item.update_time)}}</text>
									<view v-if="item.task_type==6 || item.task_type==1" style="color: #28C2CD;font-size: 28rpx;" @click="seeDetails(item.task_id, item.task_type)">查看详情<uni-icons type="right" size="28rpx" color="#28C2CD"></uni-icons></view>
								</view>
							</view>
						</view>
						<view class="ent-icon">
							<image src="/static/xiaoyuan.png" mode="aspectFill"></image>
							<text>踏入校园</text>
						</view>
					</view>
					<view style="height: 44rpx;"></view>
			</scroll-view>
		</view>
		<view class="manual" v-if="tabIndex==2&&isHandbook">

			
			<scroll-view scroll-y="true" class="scroll-Y" :scroll-into-view="scrollIntoViewId">
				<view class="man-box">
					<view class="ma-item" v-for="(item, i) in manualList" :key="item.id" :id="`man${i}`">
						<view class="ma-info ma-info-dian">
							<text-editor v-if="item.task_type==4 || item.task_type==3" :id-name="`maneditor${i}`" :read-only="true" 
								:info="{content: item.content, height: 'auto', className: 'ql-container-share'}"></text-editor>
							<text v-else class="ma-content">{{item.content}}</text>
							<view class="see-time">
								<text>{{handleTime(item.update_time)}}</text>
								<view v-if="item.task_type==6 || item.task_type==1" style="color: #28C2CD;font-size: 28rpx;" @click="seeDetails(item.task_id, item.task_type)">查看详情<uni-icons type="right" size="28rpx" color="#28C2CD"></uni-icons></view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="fuceng">
				
			</view>
			
		</view>
	</view>
</template>
<script>
import textEditor from './text-editor.vue'
export default {
    components: {
        textEditor
    },
	data() {
		return {
			tabIndex: 1,
			tabList: [{name: '轨迹图', id: '1'}, {name: '一生一册', id: '2'}],
			trajectoryList: [],
			startInfo: {},
			startList: [],
			lastList: [],
			manualList: [],
			scrollIntoViewId: 'entId',
			currentClickId: '',
			currentItem: {},
			traceHeight: { // 轨迹图盒子的高度
				// #ifdef APP-PLUS
				height: 'calc(100vh - 434rpx)',
				// #endif
				// #ifdef H5
				height: 'calc(100vh - 434rpx - 50px)',
				// #endif
			}
		}
	},
	props: {
		downRefresh: { // 监听页面上拉
			type: Number,
			default: 0
		},
		isHandbook: { // false只需要显示轨迹图
			type: Boolean,
			default: true
		},
		accountId: { // 账号ID
			type: String,
			default: ''
		},
	},
	watch: {
		
		downRefresh(val){
			this.getTrajectory()
		}
	},
	mounted(){
		if(!this.isHandbook){
			this.traceHeight = {
				// #ifdef APP-PLUS
				height: 'calc(100vh - 126rpx)',
				// #endif
				// #ifdef H5
				height: 'calc(100vh - 126rpx - 44px)',
				// #endif
			}
		}
		this.getTrajectory()
	},
	methods: {
		handleTime(time){
			time = time.split(' ')[0].split('-').join('.')
			return time
		},
		changeTab(id){
			this.tabIndex = id
			this.$nextTick(()=>{
				this.scrollIntoViewId = id==1?'entId':`man${this.manualList.length-1}`
			})
		},
		getTrajectory(){
			this.lastList = []
			let accountId = this.accountId || uni.getStorageSync('tokenObj').accountId
			this.api.get('trajectory/findTrajectoryList', {
				accountId
			}).then(res=>{
				if(res.data.state != 'ok') return;
				let list = res.data.trajectoryList;
				this.manualList = JSON.parse(JSON.stringify(list))
				list.reverse()
				// list = [{id: 1}, 2,3,4,5,6,7]
				let len = list.length
				if(len==0) return
				this.startList = list.slice(0, 3)
				
				if(len>5){
					let str = (len-3)%2
					this.lastList = str==1?[list[len-1]]:list.slice(len-2, len)
					this.trajectoryList = list.slice(3, str==1?len-1:len-2)
					this.trajectoryList.reverse()
				}else{
					this.lastList = list.slice(3, 5)
				}
				
			})
		},
		showDetail(item){
			if(this.currentClickId == item.id){
				this.currentClickId = ''
				return
			}
			this.currentClickId = item.id
		},
		seeDetails(id, type){
			this.currentClickId = ''
			if(type == 1){
				uni.navigateTo({
					url: `/pages/student/task-details?taskId=${id}&trajectory=1`
				})
			}else{
				uni.navigateTo({
					url: `/pages/student/active-details?id=${id}&accountId=${this.accountId}&original=1`
				})
			}
			
			
		}
	}
}
</script>
<style lang="less" scoped>
	.track-detail{
		background-color: #F3F8F9;
		min-height: calc(100vh - 220rpx);
		// #ifdef H5
		min-height: calc(100vh - 220rpx - 50px);
		// #endif
		
	}
	.tabs{
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 80rpx;
		background-color: #F9F9F9;
		margin-bottom: 10rpx;
		text{
			
			color: #666666;
		}
		.active{
			font-weight: 600;
			color: #333;
			position: relative;
			&::after{
				position: absolute;
				content: '';
				height: 4rpx;
				width: 80rpx;
				background-color: #333333;
				bottom: -10rpx;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
	.title-box{
		height: 126rpx;
		background: linear-gradient(45deg, #2895CD, #28C2CD);
		color: #fff;
		line-height: 40rpx;
		padding: 26rpx 0 21rpx 32rpx;
		box-sizing: border-box;
	}
	// .t-item1{
	// 	margin-left: 267rpx;
	// 	width: 260rpx;
	// 	height: 68rpx;
	// 	border: 5rpx dashed #E8E8E8;
	// 	border-radius: 0 68rpx 0 0 ;
	// 	border-bottom: none;
	// 	border-left: none;
	// 	background-color: #fff;
	// 	.fc{
	// 		margin: 32rpx 32rpx 0 0;
	// 		border-radius:  0 68rpx 0 0 ;
			
	// 		width: 228rpx;
	// 		height: 36rpx;
	// 		background-color: #F3F8F9;
	// 	}
	// }
	// .t-item2{
	// 	width: 527rpx;
	// 	height: 68rpx;
	// 	border: 5rpx dashed #E8E8E8;
	// 	border-radius: 0 0 68rpx 0;
	// 	border-top: none;
	// 	border-left: none;
		
		
	// }
	.trace-scroll-Y{
		
		
	}
	.trace-list{
		// display: flex;
		// flex-direction: column;
		// justify-content: flex-end;
		// min-height: 100%;
	}
	.min-wz, .max-wz{
		position: absolute;
		z-index: 1;
	}
	.min-img{
		
		width: 162rpx;
		height: 166rpx;
	}
	.max-img{
		width: 209rpx;
		height: 234rpx;
	}
	.last-trace{
		position: relative;
		margin-left: 179rpx;
		width: 571rpx;
		height: 105rpx;
		background-image: url(~@/static/gj-js.png);
		background-size: cover;
		background-repeat: no-repeat;
	}
	
	.last_weizhi0{
		&.min-wz{
			top: 2rpx;
			left: -44rpx;
		}
		&.max-wz{
			top: -48rpx;
			left: -68rpx;
		}
		.pro-ma-info{
			left: 0;
		}
	}
	.last_weizhi1{
		&.max-wz{
			top: -112rpx;
			right: 44rpx;
		}
	}
	.process{
		position: relative;
		width: 571rpx;
		height: 272rpx;
		background-image: url(~@/static/gj-r.png);
		background-size: cover;
		background-repeat: no-repeat;
		// background-position: 0 0 100%;
		
	}
	.pro_weizhi1{
		bottom: -72rpx;
		left: 136rpx;
		.pro-ma-info{
			left: 0;
		}
	}
	.pro_weizhi0{
		top: 38rpx;
		right: -38rpx;
	}
	.entrance{
		width: 571rpx;
		height: 513rpx;
		background-image: url(~@/static/gj-ks.png);
		background-size: cover;
		background-repeat: no-repeat;
		display: flex;
		align-items: flex-end;
		padding-left: 8rpx;
		position: relative;
		box-sizing: border-box;
		
	}
	.ent_weizhi0{
		&.min-wz{
			bottom: 38rpx;
			right: -38rpx;
		}
		&.max-wz{
			bottom: 28rpx;
			right: -60rpx;
		}
	}
	.ent_weizhi1{
		&.min-wz{
			bottom: 192rpx;
			left: 140rpx;
		}
		&.max-wz{
			bottom: 152rpx;
			left: 112rpx;
		}
		.pro-ma-info{
			left: 0;
		}
	}
	.ent_weizhi2{
		&.min-wz{
			top: 36rpx;
			right: -38rpx;
		}
		&.max-wz{
			top: -24rpx;
			right: -60rpx;
		}
	}
	.ent-icon{
		display: inline-block;
		text-align: center;
		font-size: 0;
		image{
			width: 56rpx;
			height: 57rpx;
		}
		text{
			display: block;
			color: #999;
			font-size: 22rpx;
			line-height: 30rpx;
		}
	}
	.pro-ma-info{
		position: absolute;
		right: 0;
		top: 70rpx;
	}
	.manual{
		background-color: #fff;
		padding: 18rpx 0 14rpx;
		position: relative;
	}
	.scroll-Y{
		height: calc(100vh - 290rpx);
		// #ifdef H5
		height: calc(100vh - 290rpx - 50px);
		// #endif
	}
	.fuceng{
		position: absolute;
		top: 18rpx;
		height: 94rpx;
		width: 100%;
		background: linear-gradient(0deg, rgba(255,255, 255, .1), rgba(255, 255, 255, 1));
	}
	.man-box{
		padding: 54rpx 0 26rpx;
		margin: 0 140rpx;
		border-left: 6rpx solid #52CCA3;
	}
	.ma-item{
		padding: 40rpx 38rpx;
		
	}
	.ma-info{
		padding: 24rpx 24rpx 28rpx;
		width: 408rpx;
		height: 138rpx;
		box-shadow: 0 0 13rpx 0 rgba(0, 0, 0, .12);
		border-radius: 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		
	}
	.ma-info-dian{
		position: relative;
		&::after{
			position: absolute;
			content: '';
			left: -54rpx;
			top: 57rpx;
			width: 28rpx;
			height: 28rpx;
			border-radius: 50%;
			border: 8rpx solid #52CCA3;
			box-sizing: border-box;
			background-color: #fff;
		}
	}
	.ma-content{
		display: block;
		width: 360rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.see-time{
		margin-top: 13rpx;
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		color: #999999;
	}
</style>